<template>
  <div class="department-container">
    <div class="app-container">
      <!-- 头部组件 -->
      <el-card>
          <!-- 用一个行列布局 -->
          <el-row type="flex" justify="space-between" align="middle" style="height: 40px">
            <el-col :span="20">
              <span>江苏传智播客教育科技股份有限公司</span>
            </el-col>
            <el-col :span="4">
              <el-row type="flex" justify="end">
                <!-- 两个内容 -->
                <el-col>负责人</el-col>
                <el-col>操作</el-col>
              </el-row>
            </el-col>
          </el-row>
                <!-- 树形组件 -->
          <el-tree :data="treelist"
               :props="defaultProps"
               :default-expand-all="true">
               <template  #default="{ data }">
                      <el-row
                        type="flex"
                        justify="space-between"
                        align="middle"
                        style="height: 40px; width: 100%;"
                      >
                        <el-col :span="20">
                          <span>{{ data.name }}</span>
                        </el-col>
                        <el-col :span="4">
                          <el-row type="flex" justify="end">
                            <!-- 两个内容 -->
                            <el-col>{{ data.manager }}</el-col>
                            <el-col>
                              <!-- 下拉菜单 element -->
                              <el-dropdown>
                                <span> 操作<i class="el-icon-arrow-down" /> </span>
                                <el-dropdown-menu slot="dropdown">
                                  <el-dropdown-item @click.native="openAddDialog">添加子部门</el-dropdown-item>
                                  <el-dropdown-item>编辑部门</el-dropdown-item>
                                  <el-dropdown-item @click.native="delDepart(data.id)" >删除部门</el-dropdown-item>
                                </el-dropdown-menu>
                              </el-dropdown>
                            </el-col>
                          </el-row>
                        </el-col>
                      </el-row>
               </template>
          </el-tree>
      </el-card>   
    </div>
     <!-- 弹窗 -->
       <add-depart :add-visible="addVisible" @close-dialog="closeAddDialog" />
  </div>
</template>

<script>
import {getDepartments,delDepartments} from '@/api/department'
import  transTree from '@/utils/transTree'
import AddDepart from './components/add-depart.vue'
export default {
  name: 'Department',
  components: {
    AddDepart
  },
    data() {
    return {

      // 依赖一份树形数据
      treelist: [{
        name: '财务部',
        manager:'张三',
        children: [
          {
            name: '财务核算部',
            manager:'张三',

          },
          {
            name: '税务核算部',
            manager:'张三',
          }
        ]
      }],
          defaultProps: {
          label: 'name',
          children: 'children'
        },
        addVisible:false 
    }
  },
    created() {
      this.fetchDepartment()
    },
  methods:{
    // 渲染页面
    async fetchDepartment(){
      const res = await getDepartments()
      this.treelist= transTree( res.depts)
      // console.log(res);
    },
    // 删除
    delDepart(id){
      console.log(id);
          this.$confirm('你确认要进行删除么?', '温馨提示').then(async() => {
            // 删除操作成功
            await delDepartments(id)
            // 删除成功后续操作
            this.$message.success('删除操作成功')
            this.fetchDepartment()
          })

    },
    // 新增
    openAddDialog() {
      this.addVisible = true
    },
    closeAddDialog() {
      this.addVisible = false
    }


  }
}
</script>

<style lang="scss" scoped>
.department-container{
  padding:30px;
}
</style>
